<template>
	<view class="main">
		<shop-nav title="我的空间"></shop-nav>
		<view class="content" :style="'min-height: calc( 100vh - '+ safeAreaInsetHeight +'px )' ">
			<!-- 顶部宫格 -->
			<!-- 需要地址查看，2层 1.弹出层中查看，删除地址  2.添加，修改地址 -->
			<!-- 顶部地址栏操作 -->
			<view class="top-grid">
				<!-- 收藏 -->
				<view class="goods-collect">
					<u-button class="custom-btn" type="warning" icon="star-fill" text="收藏商品"
						@click="myCollect"></u-button>
				</view>
				<!-- 足迹 -->
				<view class="footprint">
					<u-button class="custom-btn" type="success" icon="fingerprint" text="我的足迹"
						@click="myFinger"></u-button>
				</view>
				<!-- 地址中心 -->
				<view class="addrs">
					<u-button class="custom-btn" type="error" icon="car-fill" text="地址信息" @click="toAddrs"></u-button>
				</view>
			</view>
			<!-- 选项卡 -->
			<view class="order-tabs mrt-10">
				<!-- 分段器 -->
				<u-subsection :list="orderTypes" :current="subsectionCurNow" @change="sectionChange"></u-subsection>
				<!-- 显示栏 -->


				<view class="list" :style="'padding-bottom:' + safeAreaBottomHeight + 'px' ">
					<!-- flex弹性 -->
					<!-- grid宫格 -->
					<view class="list-item mrt-10" @click="toOrder" v-for="(item,index) in orderList" :key="index">
						<view class="order-no">
							<!-- 订单ID -->
							{{item.orderNo}}
						</view>
						<view class="order-info row">
							<view class="col-xl-4 col-order-min">
								<view class="order-item">
									<img :src="item.url" mode="widthFix">
								</view>
							</view>
							<view class="col-xl-4 col-order-max">
								<view class="order-item">
									<view class="shop-info">
										<view class="title">
											<!-- 商品名 -->
											{{item.title | truncateText}}
										</view>
									</view>
									<view class="shop-info">
										<view class="type">
											<!-- 商品类型 -->
											{{item.type | truncateMax}}
										</view>
									</view>
								</view>
							</view>
							<view class="col-xl-4 col-order-min">
								<view class="order-item">
									<view class="btns">
										<u-button type="info" size="small" text="查看物流" :plain="true"></u-button>
									</view>
									<view class="btns">
										<u-button type="warning" size="small" text="收货" :plain="true"></u-button>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<shop-bar :current="3"></shop-bar>
	</view>
</template>

<script>
	import { getNavIconDistance, getBarIconDistance } from '@/utils/utils.js';
	export default {
		filters: {
			truncateText(value) {
				if (value.length > 10) { // 如果文字超过24个字符
					return value.slice(0, 9) + '...'; // 返回前21个字符及省略号
				} else {
					return value; // 否则直接返回原始值
				}
			},
			truncateMax(value) {
				if (value.length > 20) { // 如果文字超过24个字符
					return value.slice(0, 19) + '...'; // 返回前21个字符及省略号
				} else {
					return value; // 否则直接返回原始值
				}
			}
		},
		data() {
			return {
				// 安全区高度获取
				safeAreaInsetHeight: 0,
				safeAreaBottomHeight: 0,
				// 订单几种状态，之后改为从后端字典表中获取(可以传入)
				orderTypes: [{ name: '未付款' }, { name: '已付款' }, { name: '已发货' }, { name: '待评价' }, { name: '已完成' }],
				// 当前分段器选择的下标
				subsectionCurNow: 0,
				orderList: [{
					orderNo: '1746666666661223554485212152522',
					url: require('@/static/waterfall/1.jpg'),
					title: '扇子',
					type: '千里江山',
					price: 186.2
				}, {
					orderNo: '1746666666661223554485212152522',
					url: require('@/static/waterfall/1.jpg'),
					title: '扇子',
					type: '千里江山',
					price: 186.2
				}, ]
			}
		},
		methods: {
			// 获取宽度高度
			getTopIconDistance() {
				this.safeAreaInsetHeight = 0;
				this.safeAreaBottomHeight = 0;
				this.safeAreaInsetHeight += getNavIconDistance() + 10;
				this.safeAreaBottomHeight = getBarIconDistance() + 50 + 10;
				this.safeAreaInsetHeight += this.safeAreaBottomHeight;
			},
			sectionChange(index) {
				this.subsectionCurNow = index;
				console.log("切换状态为" + this.orderTypes[index].name);
				this.getOrderList();
			},
			getOrderList() {
				// 调用接口进行获取
				// 类型下标 this.subsectionCurNow

			},
			toOrder() {
				// 进下单详情页面

			},
			myCollect() {
				// 我的收藏
			},
			myFinger() {
				// 我的足迹
			},
			toAddrs() {
				// 我的地址
				uni.navigateTo({
					url: './address'
				})
			}
		},
		created() {
			this.getTopIconDistance();
			this.getOrderList();
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 15rpx;
	}

	.top-grid {
		// padding: 5px 10px;
		background: var(--white);
		border-radius: 15rpx;
		height: 180rpx;
		display: grid;
		grid-template-areas: 'collect addrs'
			'footprint addrs';

		.goods-collect {
			grid-area: collect;
			box-sizing: border-box;
			padding: 8rpx;
		}

		.footprint {
			grid-area: footprint;
			box-sizing: border-box;
			padding: 8rpx;
		}

		.addrs {
			grid-area: addrs;
			box-sizing: border-box;
			padding: 8rpx 15rpx;
		}

		::v-deep .u-button {
			height: 100%;
		}
	}

	.order-tabs {
		padding: 0 10px;
		box-sizing: border-box;
		border-radius: 15rpx 15rpx 0 0;
		overflow: scroll;
		min-height: 80%;
	}

	.list {
		padding: 5rpx;

		.list-item {
			padding: 10rpx;
			background: var(--white);
			border-radius: 10rpx;


			.col-order-max {
				flex: 0 0 50%;
				max-width: 50%;
			}

			.col-order-min {
				flex: 0 0 25%;
				max-width: 25%;
			}

			.order-no {
				color: var(--text-light);
				font-size: var(--font-size-small);
				padding-left: 15rpx;

				&:before {
					content: "订单号:";
				}
			}

			.order-item {
				box-sizing: border-box;
				padding: 10rpx;

				.shop-info {
					padding: 5rpx;

					.title {
						font-size: var(--font-size-default);
						color: var(--text-dark);
						font-weight: var(--font-weight-blod);
					}

					.type {
						font-size: var(--font-size-medium);
						color: var(--text-light);
					}
				}

				img {
					margin: 0 15rpx;
					border-radius: 10rpx;
					width: 100%;
				}
			}
		}
	}

	.btns {
		margin-bottom: 10rpx;
	}
</style>